<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../css/example.css">
  </head>
  <body>
    <div class="container">
      <header>
        <hgroup>
          <h1>main title</h1>
          <h2>second title</h2>
        </hgroup>
        <p>fasdfasfadfas</p>
      </header>
      <nav>
        <a href="#">菜单>></a>
        <ul class="open">
          <li><a href="#">首页</a></li>
          <li><a href="#">产品</a></li>
          <li><a href="#">课程>></a>
              <ul class="open">
                <li><a href="#">ES6>></a>
                    <ul class="open">
                      <li><a href="#">课程简介</a></li>
                      <li><a href="#">语法攻略</a></li>
                      <li><a href="#">综合实例</a></li>
                    </ul>
                </li>
                <li><a href="#">CSS3</a></li>
                <li><a href="#">HTML5</a></li>
              </ul>
          </li>
          <li><a href="#">关于我们</a></li>
        </ul>
      </nav>

      <section class="project-list">

        <h1>商品首页</h1>
        <div class="project">
            <h2>商品名称</h2>
            <img src="timg.jpeg" alt="">
            <p>商品描述</p>
        </div>
      </section>

      <footer>
        <p>Copyright © 2013-2018 xxxx  xxxx.com All Rights Reserved. 备案号：xICP备xxxxxxxx号-1</p>
      </footer>
    </div>

  </body>

  <script type="text/javascript" src="../js/example.js"></script>
  <script type="text/javascript">
    const prodom = document.querySelector(".project");
    const proListdom = document.querySelector(".project-list");
    let d = prodom.outerHTML;
    for (let i = 0; i < 20; i++) {
      proListdom.insertAdjacentHTML("beforeEnd",d);
    }
    prodom.remove();
  </script>
</html>
